import { ref, reactive } from 'vue'
import type { ConfigProviderThemeVars } from 'vant'
import { defineStore, type StoreDefinition } from 'pinia'

export const useGlobalSettingStore: StoreDefinition<any> = defineStore('global-setting', () => {
  const state = ref({
    background: '#fff', // 背景色
    theme: 'light' // 主题
  })

  const themeVars: ConfigProviderThemeVars = reactive({
    // 此处定义全局css样式配置
    // 目前仅支持vant组件的全局样式
    // vant-card
    cardBackground: '#fff',
    cardPriceColor: '#ee0a24',
    // vant-cell-group
    cellGroupInsetPadding: '0 20px',
  })

  return { state, themeVars }
})